<template>
  <v-carousel
    cycle
    height="500"
    hide-delimiter-background
    show-arrows="hover"
    interval="5000"
  >
    <v-carousel-item
      v-for="(slide, i) in carouselSlides"
      :key="i"
      :src="slide.image"
      cover
    >
      <div class="carousel-overlay d-flex flex-column justify-center align-start pa-10">
        <h2 
          class="text-h2 font-weight-bold text-white animate-title mb-4"
          :style="{animationDelay: '0.3s'}"
        >
          {{ $t(slide.title) }}
        </h2>
        <p 
          class="text-h5 text-white animate-subtitle"
          :style="{animationDelay: '0.8s'}"
        >
          {{ $t(slide.subtitle) }}
        </p>
        <v-btn
          color="primary"
          class="mt-6 animate-button"
          :style="{animationDelay: '1.3s'}"
          :to="slide.buttonLink"
          large
          elevation="2"
        >
          {{ $t(slide.buttonText) }}
        </v-btn>
      </div>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  name: 'HeroCarousel',
  data() {
    return {
      carouselSlides: [
        {
          image: 'https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg',
          title: 'carousel.slide1.title',
          subtitle: 'carousel.slide1.subtitle',
          buttonText: 'carousel.slide1.button',
          buttonLink: '/products'
        },
        {
          image: 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg',
          title: 'carousel.slide2.title',
          subtitle: 'carousel.slide2.subtitle',
          buttonText: 'carousel.slide2.button',
          buttonLink: '/about'
        },
        {
          image: 'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
          title: 'carousel.slide3.title',
          subtitle: 'carousel.slide3.subtitle',
          buttonText: 'carousel.slide3.button',
          buttonLink: '/contact'
        }
      ]
    }
  }
}
</script>

<style scoped>
.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
}

.animate-title {
  animation: slideInLeft 1s ease-out forwards;
  opacity: 0;
  transform: translateX(-50px);
}

.animate-subtitle {
  animation: slideInLeft 1s ease-out forwards;
  opacity: 0;
  transform: translateX(-30px);
}

.animate-button {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
</style>